import React, { useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import { timeFormat } from '@/utils/common';

const ErrorList = () => {
  const filters = [
    {
      key: 'url_path',
      type: 'input',
      label: '页面路径',
    },
  ];
  const columns = [
    {
      title: '路径',
      dataIndex: 'url_path',
    },
    {
      title: '加载时间',
      dataIndex: 'load_time',
    },
    {
      title: '白屏时间',
      dataIndex: 'white_time',
    },
    {
      title: '解析DOM耗时',
      dataIndex: 'dom_time',
    },
    {
      title: 'DNS解析时间',
      dataIndex: 'dns_time',
    },
    {
      title: 'TCP连接时间',
      dataIndex: 'tcp_time',
    },
    {
      title: '首屏渲染',
      dataIndex: 'firstRender_time',
    },
  ];
  const dataRender = (list) => {
    return list.map((item) => {
      Object.keys(item).forEach((key) => {
        if (typeof item[key] == 'number') {
          item[key] += ' ms';
        }
      });
      return item;
    });
  };
  return (
    <PageContainer>
      <FilterSearch filters={filters}></FilterSearch>
      <TableList
        post
        rowKey="id"
        columns={columns}
        source="/api/monitor/admin/page_list"
        dataRender={dataRender}
      />
    </PageContainer>
  );
};

export default ErrorList;
